<script setup>
import { ref, defineProps } from 'vue'
const prop = defineProps({
  configType: {
    type: Number
  }
})
import {
  queryIndexConfigListApi,
  deleteIndexConfigByIdsApi,
  getIndexConfigByIdApi,
  saveIndexConfigApi,
  updateIndexConfigApi
} from '@/apis/index-config'
import { Delete, Plus, Edit } from '@element-plus/icons-vue'
const params = ref({
  pageNo: 1,
  pageSize: 10,
  configType: prop.configType
})
const total = ref(0)
const tableData = ref([])
const getUserList = async () => {
  const res = await queryIndexConfigListApi(params.value)
  tableData.value = res.data.data.list
  total.value = res.data.data.total
  console.log(total.value)
}
getUserList()
const columns = [
  {
    prop: '',
    type: 'selection'
  },
  {
    prop: '',
    type: 'index',
    label: '序号',
    width: '100'
  },
  {
    prop: 'configName',
    type: 'text',
    label: '商品名字',
    lineClamp: 1
  },
  {
    prop: 'redirectUrl',
    type: 'link',
    label: '跳转链接'
  },
  {
    prop: 'configRank',
    type: 'text',
    label: '排序值'
  },
  {
    prop: 'goodsId',
    type: 'text',
    label: '商品编号'
  },
  {
    prop: 'createTime',
    label: '创建时间',
    type: 'date'
  },
  {
    prop: '',
    type: 'operate',
    label: '操作'
  }
]
const ids = ref([])
// 多选
const handleSelectionChange = async (e) => {
  ids.value = e
}

// 切换页
const currentChange = (e) => {
  params.value.pageNo = e
  getUserList()
}

// 切换页大小
const sizeChange = (e) => {
  params.value.pageNo = 1
  params.value.pageSize = e
  getUserList()
}

// 删除
const onDelete = async (id) => {
  if (id) {
    await deleteIndexConfigByIdsApi([id])
  } else {
    if (ids.value.length <= 0) {
      ElMessage({
        message: '请选择要删除的数据',
        type: 'warning'
      })
      return
    }

    await ElMessageBox.confirm('确定删除吗？', '温馨提示', {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning'
    })

    await deleteIndexConfigByIdsApi(ids.value)
  }
  ElMessage({
    message: '删除成功',
    type: 'success'
  })
  params.value.pageNo = 1
  getUserList()
}

const formRef = ref(null)
const formData = ref({
  id: null,
  configType: 3,
  configName: '',
  goodsId: null,
  configRank: null,
  redirectUrl: ''
})
const formRules = {
  configName: [{ required: true, message: '请输入商品名字', trigger: 'blur' }],
  goodsId: [{ required: true, message: '请输入商品编号', trigger: 'blur' }],
  carouselRank: [{ required: true, message: '请输入排序值', trigger: 'blur' }]
}

const dialogVisible = ref(false)
// 编辑
const open = async (id) => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
  if (id) {
    const res = await getIndexConfigByIdApi(id)
    formData.value = res.data.data
  }

  dialogVisible.value = true
}

// 提交新增或者修改
const onSubmit = async () => {
  await formRef.value.validate()
  formData.value.configType = prop.configType
  if (formData.value.id) {
    // 修改
    await updateIndexConfigApi(formData.value)
  } else {
    // 新增
    await saveIndexConfigApi(formData.value)
  }
  ElMessage({
    message: formData.value.id ? '修改成功' : '新增成功',
    type: 'success'
  })
  params.value.pageNo = 1
  getUserList()
  dialogVisible.value = false
}
</script>

<template>
  <div>
    <TabComponent
      @selectionChange="handleSelectionChange"
      :columns="columns"
      :tableData="tableData"
      :height="480"
    >
      <template #header>
        <el-button type="primary" :icon="Plus" @click="open(null)"
          >新增</el-button
        >
        <el-button type="danger" :icon="Delete" @click="onDelete(null)"
          >批量删除</el-button
        >
      </template>
      <template #operate="{ row }">
        <el-button type="primary" link :icon="Edit" @click="open(row.id)"
          >编辑</el-button
        >
        <el-button type="danger" link :icon="Delete" @click="onDelete(row.id)"
          >删除</el-button
        >
      </template>

      <template #pagination>
        <el-pagination
          background
          layout="sizes,prev, pager, next,total"
          :total="total"
          :page-sizes="[10, 15, 20]"
          v-model:page-size="params.pageSize"
          v-model:current-page="params.pageNo"
          @current-change="currentChange"
          @size-change="sizeChange"
        />
      </template>
    </TabComponent>

    <!-- 弹层 -->
    <div>
      <el-dialog
        v-model="dialogVisible"
        :title="formData.id ? '修改商品' : '新增商品'"
        width="400"
      >
        <div class="form-box">
          <el-form
            ref="formRef"
            style="max-width: 22rem"
            :model="formData"
            :rules="formRules"
            label-width="auto"
            class="demo-ruleForm"
          >
            <el-form-item label="商品名字" prop="configName">
              <el-input v-model="formData.configName" />
            </el-form-item>
            <el-form-item label="跳转链接" prop="redirectUrl">
              <el-input
                type="textarea"
                resize="none"
                :autosize="{ minRows: 2, maxRows: 4 }"
                v-model="formData.redirectUrl"
              />
            </el-form-item>
            <el-form-item label="商品编号" prop="goodsId">
              <el-input v-model="formData.goodsId" type="number" :min="0" />
            </el-form-item>
            <el-form-item label="排序值" prop="configRank">
              <el-input v-model="formData.configRank" type="number" :min="0" />
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="onSubmit">
              {{ formData.id ? '修改' : '新增' }}
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<style lang="scss" scoped>
/* 文件上传样式 */
.avatar-uploader {
  :deep() {
    .avatar {
      width: 8.25rem;
      height: 8.25rem;
      display: block;
    }

    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 24px;
      color: #8c939d;
      width: 8.25rem;
      height: 8.25rem;
      text-align: center;
    }
  }
}
</style>
